<template>
  <div class="blind-box-data">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="盲盒活动数据" name="first">
        <el-date-picker
          v-model="dateVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="datepickerHandler"
          :clearable="false"
        ></el-date-picker>
        <table-data
          :flag="flag"
          :tableHeadConfig="tableHeadConfig"
          :tableLoadData="tableLoadData"
        ></table-data>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import TableData from "@/components/TableData";
export default {
  components: {
    TableData,
  },
  data() {
    return {
      tableHeadConfig: [],
      tableLoadData: [],
      activeName: "first",
      dateVal: this.time || [],
      flag: true,
      //不能选择当前日期之后的时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      searchOpt: [
        {
          type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
          name: "onlineAt",
          label: "时间",
          conf: {
            type: "datetimerange",
            format: "yyyy-MM-dd HH:mm:ss",
            "value-format": "yyyy-MM-dd HH:mm:ss",
            "start-placeholder": "发布开始时间",
            "end-placeholder": "发布截止时间",
          },
        },
      ],
    };
  },
  created() {
    this.getTimeFn();
  },
  mounted() {
    let time = new Date();
    // 减去一天
    time = +time - 86400000;
    time = new Date(time * 1);
    let m = time.getMonth() + 1;
    let d = time.getDate();
    this.preDate = m + "月" + d + "日";
    this.getBlindData();
  },

  methods: {
    //获取盲盒数据
    getBlindData() {
      this.$cancel();
      this.flag = false;
      this.$service
        .StatisReward({
          startDate: this.dateVal[0],
          endDate: this.dateVal[1],
        })
        .then((res) => {
          this.tableHeadConfig = this.$ENUMS.blindboxData;
          this.tableLoadData = res;
          this.flag = true;
        })
        .catch((err) => {});
    },

    /**
     * 设置默认时间
     */
    getTimeFn() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      end.setTime(end.getTime() - 24 * 60 * 60 * 1000);
      this.dateVal[0] = this.formatDate(start);
      this.dateVal[1] = this.formatDate(end);
    },
    /**
     * 格式化时间
     */
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },
    datepickerHandler() {
      this.getBlindData();
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-range-editor--mini.el-input__inner {
  float: left;
}
</style>
